<template>
    <div class="login-container">
        <sign-header></sign-header>
        <div class="sign-main">
            <div class="container">
                <div class="sign-modal fr">
                    <div class="form-select">
                        <div
                                class="person-btn fl"
                                :class="passwordSwitch?'active':''"
                                @click="loginChange(0)"
                        >密码登录</div>
                        <div
                                class="enterpris-btn fr"
                                :class="codeSwitch?'active':''"
                                @click="loginChange(1)"
                        >验证码登录</div>
                    </div>
                    <el-form>
                        <el-form-item v-if="codeSwitch" id="phone-input">
                            <el-input placeholder="手机号">
                                <div slot="prefix">
                                    <img src="../../../assets/images/sign-in/registered_name.png"  alt="">
                                </div>
                                <el-dropdown trigger="click" slot="prefix" class="dropdown">
                                    <span class="el-dropdown-link">
                                    +86<i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-plus">+886</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-plus">+852</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-plus">+852</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </el-input>
                        </el-form-item>
                        <el-form-item  v-if="codeSwitch">
                            <el-input placeholder="短信验证码">
                                <img src="../../../assets/images/sign-in/registered_mes.png" slot="prefix" alt="">
                                <span slot="suffix" class="link code-link">发送验证码</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="passwordSwitch">
                            <el-input placeholder="请输入用户名/邮箱">
                                <img src="../../../assets/images/sign-in/registered_name.png" slot="prefix" alt="">
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="passwordSwitch">
                            <el-input placeholder="请输入密码">
                                <img src="../../../assets/images/sign-in/login_password.png" slot="prefix" alt="">
                            </el-input>
                        </el-form-item>
                        <el-checkbox>记住密码</el-checkbox>
                        <span class="text-btn fr" style="font-size: 12px" @click="goPage('/ResetPassWord')">忘记密码？</span>
                    </el-form>
                    <div class="submit" @click="signIn">
                        登录
                    </div>
                    <div class="remarks">
                        没有账户
                        <span class="text-btn" @click="goPage('/Sign')">立即注册</span>
                    </div>
                </div>
            </div>
        </div>
        <sign-footer></sign-footer>
    </div>
</template>

<script>
    import SignHeader from '@/pages/sign-in/components/SignHeader.vue'
    import SignFooter from '@/pages/sign-in/components/SignFooter.vue'
    export default {
        name: "Login",
        components: {
            SignHeader,
            SignFooter
        },
        data() {
            return {
                passwordSwitch: false,
                codeSwitch: true,
            }
        },
        methods: {
            goPage(path) {
                this.$router.push({path: path})
            },
            signIn() {
                // if()
                this.goPage('/Enterprise');
            },
            // 更换登录方式 0密码登录 1验证码登录
            loginChange(swi) {
                this.passwordSwitch = !swi;
                this.codeSwitch = swi
            }
        }
    }
</script>

<style scoped lang="less">
    .login-container /deep/ .el-form-item__content {
        margin: 0;
    }
    .login-container /deep/ .el-form-item {
        margin-bottom: 29px;
        &:last-of-type {
            margin-bottom: 19px;
        }
    }
    .login-container /deep/ .el-input__prefix  {
        left: 9px;
        top: 2px;
    }
    .login-container /deep/ .el-checkbox__label {
        font-size:12px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(153,153,153,1);
    }
    .login-container {
        background: #fff;
        .sign-main {
            height: 800px;
            background: url("../../../assets/images/sign-in/login_bg.png") no-repeat 50% 50%/cover;
            .container {
                width: 1200px;
                background: none;
                .sign-modal {
                    width: 440px;
                    height: 440px;
                    padding: 50px 58px;
                    margin-top: 120px;
                    box-sizing: border-box;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0 4px 20px 0 rgba(51, 25, 25, 0.1);
                    border-radius: 4px;
                    .text-btn {
                        color: #188EEE;
                        cursor: pointer;
                    }
                    .form-select {
                        height: 36px;
                        margin-bottom: 40px;
                        .person-btn, .enterpris-btn {
                            width: 155px;
                            height: 36px;
                            line-height: 36px;
                            background: rgba(255, 255, 255, 1);
                            border: 1px solid rgba(227, 231, 237, 1);
                            font-family: MicrosoftYaHei;
                            color: rgba(51, 51, 51, 1);
                            text-align: center;
                            cursor: pointer;
                            &:hover {
                                .active;
                            }
                        }
                        .active {
                            border: 1px solid rgba(230, 31, 31, 1);
                            box-shadow: 0px 2px 4px 0px rgba(230, 31, 31, 0.12);
                            font-weight: 400;
                            color: rgba(230, 31, 31, 1);
                        }
                    }
                    .code-link {
                        padding: 0 10px;
                        font-size: 12px;
                        border-left: 1px solid rgba(227,231,237,1);;
                    }
                    .submit {
                        margin-top: 19px;
                        height: 42px;
                        line-height: 42px;
                        text-align: center;
                        background: rgba(230, 31, 31, 1);
                        font-size: 16px;
                        font-family: MicrosoftYaHei;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        cursor: pointer;
                    }
                    .remarks {
                        margin-top: 19px;
                        font-size: 14px;
                        text-align: center;
                        font-family: MicrosoftYaHei;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                        .login {
                            color: #188EEE;
                            cursor: pointer;
                        }

                    }
                    #phone-input {
                        position: relative;
                        .dropdown {
                            width: 59px;
                            position: absolute;
                            left: 256px;
                            top: 0;
                        }
                    }
                }
            }
        }
    }
</style>